<template>
    <div class="login">
        <!-- 左侧轮播图区域 -->
        <div class="lbt">
            <div class="block text-center" style="background-color: red">
                <el-carousel height="100vh">
                    <el-carousel-item key="1">
                        <img src="../img/1.png" style="width: 100%;height: 100vh" />
                    </el-carousel-item>
                    <el-carousel-item key="2">
                        <img src="../img/2.jpg" style="width: 100%;height: 100vh" />
                    </el-carousel-item>
                    <el-carousel-item key="3">
                        <img src="../img/3.jpg" style="width: 100%;height: 100vh" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <!-- 右侧登录信息页 -->
        <div class="infoLogin">
            <div class="title">
                <span class="bigtitle">蓝天西餐厅</span>
                <br>
                <span class="smatitle">CAFE & RESTO</span>
            </div>
            <p class="ygdl">员工登录</p>
            <div style="height: 10vh;">
                <span style="color:#636566;font-size: 1.4vw">请选择您的账户以开始轮班</span>
                <br>
                <div>
                    <el-popover placement="bottom" :width="300" trigger="click" :visible="visible">
                        <template #reference>
                            <el-input style="width: 67%;margin-top: 1vh;height:45px" @input="visible = false"
                                placeholder="请输入您的手机号" @click="visible = true" v-model="staff" />
                        </template>
                        <div v-for="item in staffList" :key="item._id"
                            @click="selectStaff(item._id, item.username, item.userphone)"
                            style="height: 50px;line-height: 50px">
                            <img :src="item.avatar"
                                style="width: 35px;height: 35px;border-radius: 50%;margin-right: 1vw;margin-top: 1vw" />

                            <span style="margin-right: 1vw">{{ item.username }}</span>

                            <span>{{ item.userphone }}</span>
                        </div>
                    </el-popover>
                    <van-button type="primary" size="normal" style="width: 30%;" @click="getcode">{{ sms }}</van-button>
                </div>

            </div>
            <div class="tishi">
                <p style="margin-top: 4vh;">请输入短信验证码以验证您的身份</p>
            </div>
            <div class="jp">
                <van-password-input :value="password" :gutter="10" width="70%" :focused="showKeyboard"
                    @focus="showKeyboard = true" :mask="false" />
                <van-number-keyboard v-model="password" width="70%" :show="showKeyboard = true" />
            </div>
            <div class="btn">
                <van-button type="primary" @click="logClick" size="large" style="width: 20vw;">开始班次</van-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
let router = useRouter()

const value = ref('');
const showKeyboard = ref(true);
const staff = ref('')  //选中的员工
let staffList = reactive([])  //员工列表
const visible = ref(false)  //控制输入框盒子显示与隐藏

const options = reactive([
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
])
// 获取员工数据
let getstaff = async () => {
    let { data: { data } } = await axios.get('http://localhost:3000/getstaff')
    Object.assign(staffList, data)
}
onMounted(() => {
    getstaff()
})
// 点击选中员工
let selectStaff = (_id: string, username: string, userphone) => {
    visible.value = false  //控制输入框盒子显示与隐藏
    staff.value = userphone
}

// 登录节流
// 节流
function handlogin(func, delay) {
    let lasttime = 0
    return function () {
        let nowtime = new Date()
        if (nowtime - lasttime > delay) {
            func.apply(this, arguments)
            lasttime = nowtime
        }
    }
}
// 登录逻辑
let password = ref('')  //用户输入的验证码
let login = async () => {
    if(password.value==sms_code.value){
            await axios.get('http://localhost:3000/login',{params:{userphone:staff.value}})
            .then(res=>{
                if(res.data.code==200){
                    sessionStorage.setItem('_id',res.data.data._id)
                    sessionStorage.setItem('username',res.data.data.username)
                    sessionStorage.setItem('userphone',res.data.data.userphone)
                    sessionStorage.setItem('role',res.data.data.role)
                    ElMessage.success('登录成功')
                    router.push('/home')
                }
            })
        }else{
            console.log(password.value);
            console.log(sms_code);
            ElMessage.error('验证码错误，请重新输入')
            // sms.value = '获取验证码'
        }
}
// 登录按钮
const logClick = handlogin(login, 5000)

// 控制验证码按钮展示内容
let sms = ref('获取验证码')
// 控制验证码按钮的状态
let smsflag = ref(false)
// 验证码内容
let sms_code = ref('')
// 获取验证码
let getcode = async () => {
    if (staff.value == '') {
        return ElMessage.warning('请输入您的员工账号')
    }
    // 获取验证码
    await axios.post('http://localhost:3000/sms/get_sms', { phone: staff.value })
        .then(res => {
            console.log(res);
            if (res.data.code == 0 && res.data.msg=='success') { 
                smsflag.value = true
                sms.value = '60s'
                ElMessage.success('验证码发送成功')
                sms_code.value = res.data.sms_code
                console.log(sms_code.value);
                timeinterval(59)
            } else if (res.data.code == 0 && res.data.msg!=='sussess'){
                ElMessage.error('账号不存在')
            } else if (res.data.code == 1) {
                ElMessage.error('手机号输入错误')
            }
        })
}
// 定时器
function timeinterval(time: number) {
    let timer = setInterval(() => {
        if (time > 0) {
            sms.value = time + 's'
            time--
        } else {
            clearInterval(timer)
            sms.value = '获取验证码'
            smsflag.value = false
        }
    }, 1000)
}

</script>

<style lang="less" scoped>
.login {
    display: flex;
    justify-content: space-between;

    .lbt {
        width: 55%;
        height: 100vh;
    }

    .infoLogin {
        width: 45%;
        height: 100vh;
        padding: 3vw 8vw;
        box-sizing: border-box;
        text-align: center;

        .title {
            .bigtitle {
                font-size: 3.5vw;
                font-weight: bold;
            }

            .smatitle {
                font-size: 1.7vw;
                font-weight: bold;
            }
        }

        .ygdl {
            color: #025CCA;
            font-size: 3vw;
            font-weight: bold;
            margin-top: 5vh;
            margin-bottom: 5vh;
        }

        .jp {
            margin: auto;
            background-color: #F8F8F8;
        }

        li {

            border: 1px solid #ccc
        }

        // 键盘
        .van-number-keyboard {
            position: fixed;
            bottom: 15vh;
            left: 55%;
            width: 45%;
            padding-top: 22px;
            background-color: white
        }

        .btn {
            position: fixed;
            bottom: 5vh;
            right: 12vw;
            // width: 50vw;
        }

    }

}
</style>